<!doctype html>
<html lang="en">

<head>
    <title>CET-6</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .fast-index {
            position: fixed;
            top: 20px;
            left: 10px;
            width: 20%;
            text-align: center;
        }

        .problem-index-group {
            display: flex;
            justify-content: flex-start;
        }

        .problem-index-group div {
            background: white;
            border: solid;
            border-color: burlywood;
            width: 20%;
        }
    </style>

    <!-- Bootstrap CSS v5.2.1 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

</head>

<body>
    <main>
        <section class="text-center">
            <div class="container pt-3">
                <h1>{{exam.name}}</h1>
                <span>结束时间:{{exam.do_time}}</span>
            </div>
        </section>
        <div class="container w-50 mt-5">
            <form role="form" method="post" id="allAns">
                <!-- 单选题 -->
                {% for ctx in ss_ctx%}
                <div class="form-group mb-3">
                    <p class="h5 problem-text" id="p{{loop.index}}">{{loop.index}}. {{ctx[0]}}</p>
                    <div class="form-check">
                        <!-- 这里，下边的name是post时候的key，value是post时候的value；同时要保持input的id和label的id一样 -->
                        <input class="form-check-input" type="radio" name={{ctx[2]}} id="problem{{loop.index}}-op1"
                            value="A">
                        <label class="form-check-label" for="problem{{loop.index}}-op1">
                            A. {{ctx[1][0]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name={{ctx[2]}} id="problem{{loop.index}}-op2"
                            value="B">
                        <label class="form-check-label" for="problem{{loop.index}}-op2">
                            B. {{ctx[1][1]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name={{ctx[2]}} id="problem{{loop.index}}-op3"
                            value="C">
                        <label class="form-check-label" for="problem{{loop.index}}-op3">
                            C. {{ctx[1][2]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name={{ctx[2]}} id="problem{{loop.index}}-op4"
                            value="D">
                        <label class="form-check-label" for="problem{{loop.index}}-op4">
                            D. {{ctx[1][3]}}
                        </label>
                    </div>
                </div>
                {% endfor%}

                <!-- 多选题 -->
                {% for ctx in multi%}
                <div class="form-group mb-3">
                    <p class="h5 problem-text" id="p2">{{loop.index}}. {{ctx[0]}}</p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name={{ctx[2]}} id="problem2-op1" value="A">
                        <label class="form-check-label" for="problem2-op1">
                            A. {{ctx[1][0]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name={{ctx[2]}} id="problem2-op2" value="B">
                        <label class="form-check-label" for="problem2-op2">
                            B. {{ctx[1][1]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name={{ctx[2]}} id="problem2-op3" value="C">
                        <label class="form-check-label" for="problem2-op3">
                            C. {{ctx[0][2]}}
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name={{ctx[2]}} id="problem2-op4" value="D">
                        <label class="form-check-label" for="problem2-op4">
                            D. {{ctx[0][3]}}
                        </label>
                    </div>
                </div>
                {% endfor%}

                <!-- 简答题 -->
                {% for ctx in short_ans%}
                <div class="form-group mb-3">
                    <p class="h5 problem-text" id="p3">{{loop.index}}. {{ctx[0]}}</p>
                    <textarea class="form-control" name={{ctx[1]}}></textarea>
                </div>
                {% endfor %}


                <!-- 这个可以用来辅助向后端传考试的id -->
                <!--<input type="text" value="{{examId}}" style="visibility: hidden;" name="examId">-->

                <div class="fast-index" id="fast-index">
                    <div class="index-content" id="fast-index-content">
                    </div>
                    <div class="mt-3">
                        <a class="btn btn-primary mb-5" onclick="submitAns()">提交答案</a>
                    </div>
                </div>

                <div class="d-flex align-items-center justify-content-center">
                    <a class="btn btn-primary mb-5" onclick="submitAns()">提交答案</a>
                </div>
            </form>
        </div>
        <script>
            function submitAns() {
                if (confirm("是否提交答案，提交后无法更改")) {
                    var form = document.getElementById("allAns");
                    form.submit();
                    window.href = "{{url_for('stu.stuIndex')}}";
                } else {
                    return;
                }
            }


        </script>
        <script>
            var indexBox = document.getElementById("fast-index-content");
            var problems = document.getElementsByClassName("problem-text");
            if (problems.length > 0) {
                var cnt = 0;
                var nowDiv = document.createElement("div");
                nowDiv.classList.add("problem-index-group");
                nowDiv.classList.add("mb-1");
                indexBox.appendChild(nowDiv);
                for (var i = 0; i < problems.length; i++) {
                    cnt++;
                    var problem = problems[i];
                    var problemId = problem.id;
                    var dirDiv = document.createElement("div");
                    var dirA = document.createElement("a");
                    dirA.setAttribute("href", "#" + problemId);
                    dirA.innerHTML = problemId.substr(1, problemId.length - 1);
                    dirDiv.append(dirA);
                    nowDiv.append(dirDiv);
                    if (cnt % 5 == 0) {
                        nowDiv = document.createElement("div");
                        nowDiv.classList.add("problem-index-group");
                        nowDiv.classList.add("mb-1");
                        indexBox.appendChild(nowDiv);
                    }
                }
            }
        </script>
    </main>
    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
        </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
        integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
        </script>


</body>

</html>